<template>
  <div class="detail-invoice-container">

      <!-- <h4 slot="title" class="fail-detail-title">{{ status === ' 1' ? '已开发票详情' : (status === '2' ? '待红冲发票详情': ( status === '3' ? '开票失败详情' : '')) }}</h4> -->
      <ul class="detail-panel">
        <!-- <li class="w-50"><div class="label-item">合同号：</div><div class="value-item">{{formData.invoiceApplyInfoDo.contractNo}}</div></li> -->
        <li class="w-50"><div class="label-item">结算单号：</div><div class="value-item">{{formData.invoiceApplyInfoDo.orderNo}}</div></li>
        <li class="w-50"><div class="label-item">发票抬头：</div><div class="value-item">{{formData.invoiceApplyInfoDo.invoiceTitle}}</div></li>
        <li class="w-50"><div class="label-item">发票号码：</div>
          <div class="value-item">
            <div class="hover-container" v-for="(item, index) in formData.invoiceApplyMarkDoList">
              <span v-if="item.blueInvoiceNo" @click="lookTax(item.bluePdfPath)">{{item.blueInvoiceNo}}(蓝票);</span>
              <span v-if="item.redInvoiceNo" @click="lookTax(item.redPdfPath)">{{item.redInvoiceNo}}(红票);</span>
            </div>
          </div>
        </li>
        <li class="w-50"><div class="label-item">纳税人识别号：</div><div class="value-item">{{formData.invoiceApplyInfoDo.gmfTaxpayerIdentifyNo}}</div></li>
        <li class="w-50"><div class="label-item">发票性质：</div><div class="value-item">{{formData.invoiceApplyInfoDo.invoiceTypeTxt}}</div></li>
        <li class="w-50"><div class="label-item">发票抬头类型：</div><div class="value-item">{{formData.invoiceApplyInfoDo.invoiceTitleType}}</div></li>

        <!-- <li class="w-100" v-if="status === '2'"><div class="label-item">红冲原因：</div><div class="value-item">暂无</div></li> -->
        <!-- <li class="w-50" v-if="status === '3'"><div class="label-item">失败原因：</div><div class="value-item">暂无</div></li> -->
        <!-- <li class="w-100"><div class="label-item">合同签约方：</div><div class="value-item">暂无</div></li> -->
        <!-- <li class="w-50"><div class="label-item">开票项目：</div><div class="value-item">暂无</div></li> -->
         <li class="w-50"><div class="label-item">税率：</div><div class="value-item">{{avgTaxTate}}</div></li>
        <li class="w-50"><div class="label-item">开票总金额(含税)：</div><div class="value-item">{{noTax}}</div></li>

        <li class="w-50"><div class="label-item">税额：</div><div class="value-item">{{formData.invoiceApplyInfoDo.invoiceTax}}</div></li>
      </ul>
      <ul class="detail-panel">
        <li class="w-50"><div class="label-item">收件人姓名：</div><div class="value-item">{{formData.invoiceApplyInfoDo.memberName}}</div></li>
        <li class="w-50"><div class="label-item">收件人手机号：</div><div class="value-item">{{formData.invoiceApplyInfoDo.mobile}}</div></li>
        <li class="w-50"><div class="label-item">邮箱地址：</div><div class="value-item">{{formData.invoiceApplyInfoDo.email}}</div></li>
        <!-- <template v-if="status === '2'">
          <li class="w-100"><div class="label-item">所在地区：</div><div class="value-item">暂无</div></li>
          <li class="w-100"><div class="label-item">详细地址：</div><div class="value-item">暂无</div></li>
          <li class="w-100"><div class="label-item">邮政编码：</div><div class="value-item">暂无</div></li>
          <li class="w-50"><div class="label-item">旧票快递方：</div><div class="value-item">暂无</div></li>
          <li class="w-50"><div class="label-item">旧票快递单号：</div><div class="value-item">暂无</div></li>
        </template> -->
      </ul>
      <ul class="detail-panel">
        <li class="w-100"><div class="label-item">注册地址：</div><div class="value-item">{{formData.invoiceApplyInfoDo.gmfRegisterAddress}}</div></li>
        <li class="w-100"><div class="label-item">注册电话：</div><div class="value-item">{{formData.invoiceApplyInfoDo.gmfRegisterPhone}}</div></li>
        <li class="w-100"><div class="label-item">开户银行：</div><div class="value-item">{{formData.invoiceApplyInfoDo.gmfOpenBank}}</div></li>
        <li class="w-100"><div class="label-item">银行账户：</div><div class="value-item">{{formData.invoiceApplyInfoDo.gmfBankAccount}}</div></li>
      </ul>
      <ul class="detail-panel">
        <li class="w-100"><div class="label-item">备注：</div><div class="value-item">{{formData.invoiceApplyInfoDo.remark}}</div></li>
      </ul>
  </div>
</template>
<script>
export default {
  props: {
    status: {
      type: String,
      default: ''  // 2待红冲详情  1已开开发票  3开票失败
    },
    formData: {
       type: Object,
       default: () => {
         return {
          invoiceApplyInfoDo: {},
          invoiceApplyMarkDoList: {}
         }
       }
    }
  },
  computed:{
    avgTaxTate() {
      let taxRate = 0
      if (this.formData.invoiceApplyInfoDo.invoiceTax && this.formData.invoiceApplyInfoDo.invoiceAmount) {
        return (this.formData.invoiceApplyInfoDo.invoiceTax  / (this.formData.invoiceApplyInfoDo.invoiceAmount)).toFixed(2)
      }
      return taxRate
    },
    noTax() {
      if (this.formData.invoiceApplyInfoDo.invoiceAmount && this.formData.invoiceApplyInfoDo.invoiceTax) {
        return (this.formData.invoiceApplyInfoDo.invoiceAmount + this.formData.invoiceApplyInfoDo.invoiceTax).toFixed(2)
      }
      if (this.formData.invoiceApplyInfoDo.invoiceAmount) {
        return this.formData.invoiceApplyInfoDo.invoiceAmount
      }
      return 0
    }
  },
  methods: {
    lookTax(url){
      if (url.indexOf('http') > -1) {
        window.open(url)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.detail-invoice-container {
  .fail-detail-title {
    font-size: 18px;
    text-align: center;
  }
  .hover-container {
    display: inline-block;
    cursor: pointer;
    span:hover {
      color: #409EFF;
    }
  }
  .detail-panel {
    overflow: hidden;
    width: 100%;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
    .w-50 {
      width:50%;
      float: left;
      padding: 10px 0;
    }
    .label-item, .value-item {
      float: left;
    }
    .label-item {
      width: 130px;
      text-align: right;
    }
    .w-100 {
      float: left;
      width: 100%;
      padding: 10px 0;
    }
  }
}

</style>
